<template>
    <el-table-column
        v-if="item.type === 'selection' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        type="selection"
        :width="item.width || 60"
        :align="item.align || 'center'"
    >
    </el-table-column>
    <el-table-column
        v-else-if="item.type === 'sortIndex' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label || '序号'"
        :align="item.align || 'center'"
        :width="item.width || 60"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <span>{{ scope.$index + 1 }}</span>
        </template>
    </el-table-column>
    <el-table-column
        v-else-if="(!item.type || item.type === 'text') && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width"
        :show-overflow-tooltip="item.ellipsis || false"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <span>{{ [null, undefined].includes(scope.row[item.prop]) ? (item.replaceValue || "-") : scope.row[item.prop] }}</span>
        </template>
    </el-table-column>
    <el-table-column
        v-else-if="item.type === 'date' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.ellipsis || false"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <span>{{ getDate(scope.row[item.prop], item.format) }}</span>
        </template>
    </el-table-column>
    <el-table-column
        v-else-if="item.type === 'slot' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :prop="item.prop"
        :align="item.align || 'center'"
        :width="item.width"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.ellipsis || false"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <div class="slot-box">
                <slot :name="item.slotName" :data="{ scope, item }"></slot>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        v-else-if="item.type === 'operate' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :align="item.align || 'center'"
        :width="item.width"
        :fixed="item.fixed || 'right'"
        v-bind="item"
    >
        <template v-slot:default="scope">
            <div class="operate-box">
                <template v-for="(operateItem, operateIndex) in item.operateOptions">
                    <el-button
                        :key="operateItem.btnName + operateIndex"
                        :type="operateItem.btnType || 'default'"
                        :size="operateItem.btnSize || 'mini'"
                        :disabled="operateItem.disabled || (operateItem.isDisabled && operateItem.isDisabled(scope.row, item))"
                        @click="operateItem.btnClick && operateItem.btnClick(scope.row, item, scope, operateItem)"
                    >{{ operateItem.btnName || "按钮"}}</el-button>
                </template>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        v-else-if="item.type === 'multiple' && (item.isHide ? false : item.isHideFn ? item.isHideFn(item) : true)"
        :label="item.label"
        :align="item.align || 'center'"
    >
        <template 
            v-for="(childItem,childIndex) in item.children"
        >
            <TableColumn :item="childItem" :key=" childItem.label+childIndex || 'column-item-'+childIndex "></TableColumn>
        </template>
    </el-table-column>
</template>

<script>
import Qilin from "qilin-utils";
export default {
    name:"TableColumn",
    props:{
        item:{
            type:Object,
            default(){
                return {};
            }
        }
    },
    data(){
        return {

        }
    },
    computed:{
        getDate() {
            return function (date, format) {
                if (!date) {
                    return "-";
                };
                return Qilin.Date.formatDate(date, format);
            };
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>

</style>
